<template>
  <div class="min-h-screen bg-gray-50 dark:bg-dark-950">
    <!-- Header -->
    <div class="bg-white dark:bg-dark-900 shadow-sm border-b border-gray-200 dark:border-dark-700 p-6">
      <div class="flex items-center justify-between">
        <div>
          <h1 class="text-2xl font-bold text-gray-900 dark:text-gray-100">SQL日志管理</h1>
          <p class="text-sm text-gray-600 dark:text-gray-400 mt-1">AI中控SQL执行日志监控与审计</p>
        </div>
        <div class="flex items-center space-x-4">
          <!-- 统计卡片 -->
          <div class="grid grid-cols-4 gap-4">
            <div class="bg-blue-50 dark:bg-blue-900/20 p-3 rounded-lg">
              <div class="text-xs text-blue-600 dark:text-blue-400">总日志数</div>
              <div class="text-lg font-bold text-blue-700 dark:text-blue-300">{{ stats.total_logs }}</div>
            </div>
            <div class="bg-green-50 dark:bg-green-900/20 p-3 rounded-lg">
              <div class="text-xs text-green-600 dark:text-green-400">成功执行</div>
              <div class="text-lg font-bold text-green-700 dark:text-green-300">{{ stats.success_count }}</div>
            </div>
            <div class="bg-red-50 dark:bg-red-900/20 p-3 rounded-lg">
              <div class="text-xs text-red-600 dark:text-red-400">执行失败</div>
              <div class="text-lg font-bold text-red-700 dark:text-red-300">{{ stats.failed_count }}</div>
            </div>
            <div class="bg-yellow-50 dark:bg-yellow-900/20 p-3 rounded-lg">
              <div class="text-xs text-yellow-600 dark:text-yellow-400">高风险</div>
              <div class="text-lg font-bold text-yellow-700 dark:text-yellow-300">{{ stats.risk_distribution?.high || 0 }}</div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- Filters -->
    <div class="bg-white dark:bg-dark-900 p-4 border-b border-gray-200 dark:border-dark-700">
      <div class="flex flex-wrap items-center gap-4">
        <!-- SQL类型筛选 -->
        <div class="flex items-center space-x-2">
          <label class="text-sm font-medium text-gray-700 dark:text-gray-300">SQL类型:</label>
          <select 
            v-model="filters.sql_type" 
            @change="loadData"
            class="form-select text-sm border-gray-300 dark:border-dark-600 dark:bg-dark-800 dark:text-gray-100 rounded-md"
          >
            <option value="">全部</option>
            <option value="SELECT">SELECT</option>
            <option value="INSERT">INSERT</option>
            <option value="UPDATE">UPDATE</option>
            <option value="DELETE">DELETE</option>
            <option value="CREATE">CREATE</option>
            <option value="ALTER">ALTER</option>
            <option value="DROP">DROP</option>
            <option value="OTHER">OTHER</option>
          </select>
        </div>

        <!-- 执行状态筛选 -->
        <div class="flex items-center space-x-2">
          <label class="text-sm font-medium text-gray-700 dark:text-gray-300">执行状态:</label>
          <select 
            v-model="filters.execution_status" 
            @change="loadData"
            class="form-select text-sm border-gray-300 dark:border-dark-600 dark:bg-dark-800 dark:text-gray-100 rounded-md"
          >
            <option value="">全部</option>
            <option value="pending">待执行</option>
            <option value="success">成功</option>
            <option value="failed">失败</option>
            <option value="cancelled">已取消</option>
          </select>
        </div>

        <!-- 风险等级筛选 -->
        <div class="flex items-center space-x-2">
          <label class="text-sm font-medium text-gray-700 dark:text-gray-300">风险等级:</label>
          <select 
            v-model="filters.risk_level" 
            @change="loadData"
            class="form-select text-sm border-gray-300 dark:border-dark-600 dark:bg-dark-800 dark:text-gray-100 rounded-md"
          >
            <option value="">全部</option>
            <option value="low">低风险</option>
            <option value="medium">中风险</option>
            <option value="high">高风险</option>
            <option value="critical">极高风险</option>
          </select>
        </div>

        <!-- 日期范围 -->
        <div class="flex items-center space-x-2">
          <label class="text-sm font-medium text-gray-700 dark:text-gray-300">开始日期:</label>
          <input 
            v-model="filters.start_date" 
            @change="loadData"
            type="date" 
            class="form-input text-sm border-gray-300 dark:border-dark-600 dark:bg-dark-800 dark:text-gray-100 rounded-md"
          >
        </div>
        <div class="flex items-center space-x-2">
          <label class="text-sm font-medium text-gray-700 dark:text-gray-300">结束日期:</label>
          <input 
            v-model="filters.end_date" 
            @change="loadData"
            type="date" 
            class="form-input text-sm border-gray-300 dark:border-dark-600 dark:bg-dark-800 dark:text-gray-100 rounded-md"
          >
        </div>

        <!-- 刷新按钮 -->
        <button 
          @click="loadData" 
          class="inline-flex items-center px-3 py-2 border border-transparent text-sm leading-4 font-medium rounded-md text-white bg-primary-600 hover:bg-primary-700"
        >
          <ArrowPathIcon class="w-4 h-4 mr-1" />
          刷新
        </button>
      </div>
    </div>

    <!-- Loading -->
    <div v-if="loading" class="flex items-center justify-center py-8">
      <div class="loading-spinner w-6 h-6 border-2 border-primary-500 border-t-transparent rounded-full"></div>
      <span class="ml-2 text-gray-600 dark:text-gray-400">加载中...</span>
    </div>

    <!-- VEX TABLE -->
    <div v-else>
      <VexTable
        :data="logs"
        :columns="tableColumns"
        :loading="loading"
        :pagination="paginationData"
        :actions="tableActions"
        @refresh="loadData"
        @search="handleSearch"
        @page-change="handlePageChange"
        @action="handleTableAction"
        height="600px"
      />
          <thead class="bg-gray-50 dark:bg-dark-800">
            <tr>
              <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">ID</th>
              <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">用户</th>
              <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">SQL语句</th>
              <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">类型</th>
              <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">目标表</th>
              <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">状态</th>
              <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">风险等级</th>
              <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">执行时间</th>
              <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">创建时间</th>
              <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">操作</th>
            </tr>
          </thead>
          <tbody class="bg-white dark:bg-dark-900 divide-y divide-gray-200 dark:divide-dark-700">
            <tr v-for="log in logs" :key="log.id" class="hover:bg-gray-50 dark:hover:bg-dark-800">
              <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-gray-100">{{ log.id }}</td>
              <td class="px-6 py-4 whitespace-nowrap">
                <div class="text-sm text-gray-900 dark:text-gray-100">{{ log.user?.realName || log.user?.username || `用户${log.user_id}` }}</div>
                <div class="text-xs text-gray-500 dark:text-gray-400">ID: {{ log.user_id }}</div>
              </td>
              <td class="px-6 py-4">
                <div class="text-sm text-gray-900 dark:text-gray-100 font-mono bg-gray-100 dark:bg-dark-800 p-2 rounded max-w-xs overflow-hidden">
                  <div class="truncate" :title="log.sql_statement">{{ log.sql_statement || '-' }}</div>
                </div>
              </td>
              <td class="px-6 py-4 whitespace-nowrap">
                <span :class="getSQLTypeClass(log.sql_type)" class="inline-flex px-2 py-1 text-xs font-semibold rounded-full">
                  {{ log.sql_type || '-' }}
                </span>
              </td>
              <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-gray-100">{{ log.target_table || '-' }}</td>
              <td class="px-6 py-4 whitespace-nowrap">
                <span :class="getStatusClass(log.execution_status)" class="inline-flex px-2 py-1 text-xs font-semibold rounded-full">
                  {{ getStatusText(log.execution_status) }}
                </span>
              </td>
              <td class="px-6 py-4 whitespace-nowrap">
                <span :class="getRiskClass(log.risk_level)" class="inline-flex px-2 py-1 text-xs font-semibold rounded-full">
                  {{ getRiskText(log.risk_level) }}
                </span>
              </td>
              <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-gray-100">
                {{ log.execution_time ? `${log.execution_time}ms` : '-' }}
              </td>
              <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400">
                {{ formatDateTime(log.created_at) }}
              </td>
              <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
                <div class="flex items-center space-x-2">
                  <button 
                    @click="viewDetail(log)" 
                    class="text-primary-600 hover:text-primary-900 dark:text-primary-400 dark:hover:text-primary-300"
                  >
                    <EyeIcon class="w-4 h-4" />
                  </button>
                  <button 
                    v-if="!log.is_approved && log.execution_status === 'pending'" 
                    @click="approveLog(log, true)" 
                    class="text-green-600 hover:text-green-900 dark:text-green-400 dark:hover:text-green-300"
                  >
                    <CheckIcon class="w-4 h-4" />
                  </button>
                  <button 
                    v-if="!log.is_approved && log.execution_status === 'pending'" 
                    @click="approveLog(log, false)" 
                    class="text-red-600 hover:text-red-900 dark:text-red-400 dark:hover:text-red-300"
                  >
                    <XMarkIcon class="w-4 h-4" />
                  </button>
                </div>
              </td>
            </tr>
            
            <!-- Empty state -->
            <tr v-if="logs.length === 0">
              <td colspan="10" class="px-6 py-8 text-center text-gray-500 dark:text-gray-400">
                <div class="flex flex-col items-center">
                  <DocumentTextIcon class="w-12 h-12 text-gray-300 dark:text-gray-600 mb-4" />
                  <p>暂无SQL日志记录</p>
                </div>
              </td>
            </tr>
          </tbody>
        </table>
      </div>

      <!-- Pagination -->
      <div v-if="pagination.total > 0" class="bg-white dark:bg-dark-900 px-6 py-3 border-t border-gray-200 dark:border-dark-700">
        <div class="flex items-center justify-between">
          <div class="text-sm text-gray-700 dark:text-gray-300">
            显示第 {{ (pagination.page - 1) * pagination.limit + 1 }} - {{ Math.min(pagination.page * pagination.limit, pagination.total) }} 条，
            共 {{ pagination.total }} 条记录
          </div>
          <div class="flex items-center space-x-2">
            <button
              @click="goToPage(pagination.page - 1)"
              :disabled="pagination.page <= 1"
              class="relative inline-flex items-center px-3 py-2 text-sm font-medium text-gray-500 bg-white border border-gray-300 rounded-md hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed dark:bg-dark-800 dark:border-dark-600 dark:text-gray-300 dark:hover:bg-dark-700"
            >
              上一页
            </button>
            
            <div class="flex items-center space-x-1">
              <button
                v-for="page in getPageNumbers()"
                :key="page"
                @click="goToPage(page)"
                :class="[
                  'relative inline-flex items-center px-3 py-2 text-sm font-medium border rounded-md',
                  page === pagination.page
                    ? 'bg-primary-600 text-white border-primary-600'
                    : 'text-gray-500 bg-white border-gray-300 hover:bg-gray-50 dark:bg-dark-800 dark:border-dark-600 dark:text-gray-300 dark:hover:bg-dark-700'
                ]"
              >
                {{ page }}
              </button>
            </div>
            
            <button
              @click="goToPage(pagination.page + 1)"
              :disabled="pagination.page >= Math.ceil(pagination.total / pagination.limit)"
              class="relative inline-flex items-center px-3 py-2 text-sm font-medium text-gray-500 bg-white border border-gray-300 rounded-md hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed dark:bg-dark-800 dark:border-dark-600 dark:text-gray-300 dark:hover:bg-dark-700"
            >
              下一页
            </button>
          </div>
        </div>
      </div>
    </div>

    <!-- Detail Modal -->
    <div v-if="showDetailModal" class="fixed inset-0 z-50 overflow-y-auto">
      <div class="flex items-center justify-center min-h-screen px-4 pt-4 pb-20 text-center sm:block sm:p-0">
        <div class="fixed inset-0 transition-opacity bg-gray-500 bg-opacity-75 dark:bg-gray-900 dark:bg-opacity-75" @click="closeDetailModal"></div>

        <div class="inline-block w-full max-w-4xl p-6 my-8 overflow-hidden text-left align-middle transition-all transform bg-white dark:bg-dark-800 shadow-xl rounded-lg">
          <div class="flex items-center justify-between mb-4">
            <h3 class="text-lg font-medium text-gray-900 dark:text-gray-100">SQL日志详情</h3>
            <button @click="closeDetailModal" class="text-gray-400 hover:text-gray-600 dark:hover:text-gray-300">
              <XMarkIcon class="w-6 h-6" />
            </button>
          </div>

          <div v-if="selectedLog" class="space-y-4">
            <!-- 基本信息 -->
            <div class="grid grid-cols-2 gap-4">
              <div>
                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300">日志ID</label>
                <p class="text-sm text-gray-900 dark:text-gray-100">{{ selectedLog.id }}</p>
              </div>
              <div>
                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300">执行用户</label>
                <p class="text-sm text-gray-900 dark:text-gray-100">{{ selectedLog.user?.realName || selectedLog.user?.username || `用户${selectedLog.user_id}` }}</p>
              </div>
              <div>
                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300">会话ID</label>
                <p class="text-sm text-gray-900 dark:text-gray-100">{{ selectedLog.session_id || '-' }}</p>
              </div>
              <div>
                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300">AI模型</label>
                <p class="text-sm text-gray-900 dark:text-gray-100">{{ selectedLog.ai_model }}</p>
              </div>
            </div>

            <!-- 用户查询 -->
            <div>
              <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">用户查询</label>
              <div class="bg-gray-100 dark:bg-dark-700 p-3 rounded-md">
                <p class="text-sm text-gray-900 dark:text-gray-100 whitespace-pre-wrap">{{ selectedLog.user_query }}</p>
              </div>
            </div>

            <!-- SQL语句 -->
            <div v-if="selectedLog.sql_statement">
              <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">SQL语句</label>
              <div class="bg-gray-900 dark:bg-gray-800 p-3 rounded-md">
                <pre class="text-sm text-green-400 font-mono whitespace-pre-wrap">{{ selectedLog.sql_statement }}</pre>
              </div>
            </div>

            <!-- 执行信息 -->
            <div class="grid grid-cols-3 gap-4">
              <div>
                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300">执行状态</label>
                <span :class="getStatusClass(selectedLog.execution_status)" class="inline-flex px-2 py-1 text-xs font-semibold rounded-full">
                  {{ getStatusText(selectedLog.execution_status) }}
                </span>
              </div>
              <div>
                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300">风险等级</label>
                <span :class="getRiskClass(selectedLog.risk_level)" class="inline-flex px-2 py-1 text-xs font-semibold rounded-full">
                  {{ getRiskText(selectedLog.risk_level) }}
                </span>
              </div>
              <div>
                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300">执行时间</label>
                <p class="text-sm text-gray-900 dark:text-gray-100">{{ selectedLog.execution_time ? `${selectedLog.execution_time}ms` : '-' }}</p>
              </div>
            </div>

            <!-- AI响应 -->
            <div v-if="selectedLog.ai_response">
              <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">AI响应</label>
              <div class="bg-blue-50 dark:bg-blue-900/20 p-3 rounded-md">
                <div class="text-sm text-gray-900 dark:text-gray-100 whitespace-pre-wrap" v-html="formatMarkdown(selectedLog.ai_response)"></div>
              </div>
            </div>

            <!-- 错误信息 -->
            <div v-if="selectedLog.error_message">
              <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">错误信息</label>
              <div class="bg-red-50 dark:bg-red-900/20 p-3 rounded-md">
                <p class="text-sm text-red-900 dark:text-red-100 whitespace-pre-wrap">{{ selectedLog.error_message }}</p>
              </div>
            </div>

            <!-- 时间信息 -->
            <div class="grid grid-cols-3 gap-4 text-sm text-gray-500 dark:text-gray-400">
              <div>
                <label class="block font-medium">创建时间</label>
                <p>{{ formatDateTime(selectedLog.created_at) }}</p>
              </div>
              <div v-if="selectedLog.executed_at">
                <label class="block font-medium">执行时间</label>
                <p>{{ formatDateTime(selectedLog.executed_at) }}</p>
              </div>
              <div v-if="selectedLog.approved_at">
                <label class="block font-medium">审批时间</label>
                <p>{{ formatDateTime(selectedLog.approved_at) }}</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import { sqlLogAPI } from '@/api'
import type { SQLLog } from '@/types'
import { format } from 'date-fns'
import { zhCN } from 'date-fns/locale'

// Icons
import {
  ArrowPathIcon,
  EyeIcon,
  CheckIcon,
  XMarkIcon,
  DocumentTextIcon
} from '@heroicons/vue/24/outline'

// Reactive state
const loading = ref(false)
const logs = ref<SQLLog[]>([])
const selectedLog = ref<SQLLog | null>(null)
const showDetailModal = ref(false)

// Pagination
const pagination = reactive({
  page: 1,
  limit: 20,
  total: 0
})

// Filters
const filters = reactive({
  sql_type: '',
  execution_status: '',
  risk_level: '',
  start_date: '',
  end_date: ''
})

// Stats
const stats = reactive({
  total_logs: 0,
  success_count: 0,
  failed_count: 0,
  risk_distribution: {} as Record<string, number>
})

// Methods
const loadData = async () => {
  loading.value = true
  try {
    const [logsResponse, statsResponse] = await Promise.all([
      sqlLogAPI.getSQLLogs({
        page: pagination.page,
        limit: pagination.limit,
        ...filters
      }),
      sqlLogAPI.getSQLLogStats(filters.start_date || filters.end_date ? {
        start_date: filters.start_date,
        end_date: filters.end_date
      } : undefined)
    ])

    if (logsResponse.success) {
      logs.value = logsResponse.data.logs
      pagination.total = logsResponse.data.total
      pagination.page = logsResponse.data.page
      pagination.limit = logsResponse.data.limit
    }

    if (statsResponse.success) {
      Object.assign(stats, statsResponse.data)
    }
  } catch (error) {
    console.error('加载SQL日志失败:', error)
  } finally {
    loading.value = false
  }
}

const viewDetail = (log: SQLLog) => {
  selectedLog.value = log
  showDetailModal.value = true
}

const closeDetailModal = () => {
  showDetailModal.value = false
  selectedLog.value = null
}

const approveLog = async (log: SQLLog, approved: boolean) => {
  try {
    const response = await sqlLogAPI.approveSQLLog(log.id, { approved })
    if (response.success) {
      // 刷新数据
      loadData()
    }
  } catch (error) {
    console.error('审批SQL日志失败:', error)
  }
}

const goToPage = (page: number) => {
  pagination.page = page
  loadData()
}

const getPageNumbers = () => {
  const totalPages = Math.ceil(pagination.total / pagination.limit)
  const currentPage = pagination.page
  const pages: number[] = []

  if (totalPages <= 7) {
    for (let i = 1; i <= totalPages; i++) {
      pages.push(i)
    }
  } else {
    if (currentPage <= 4) {
      for (let i = 1; i <= 5; i++) {
        pages.push(i)
      }
      pages.push(-1, totalPages)
    } else if (currentPage >= totalPages - 3) {
      pages.push(1, -1)
      for (let i = totalPages - 4; i <= totalPages; i++) {
        pages.push(i)
      }
    } else {
      pages.push(1, -1)
      for (let i = currentPage - 1; i <= currentPage + 1; i++) {
        pages.push(i)
      }
      pages.push(-1, totalPages)
    }
  }

  return pages
}

// Utility functions
const formatDateTime = (dateStr: string) => {
  return format(new Date(dateStr), 'yyyy-MM-dd HH:mm:ss', { locale: zhCN })
}

const formatMarkdown = (text: string) => {
  // Simple markdown formatting for AI responses
  return text
    .replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>')
    .replace(/\*(.*?)\*/g, '<em>$1</em>')
    .replace(/`(.*?)`/g, '<code class="bg-gray-200 dark:bg-gray-700 px-1 rounded">$1</code>')
    .replace(/\n/g, '<br>')
}

const getSQLTypeClass = (type?: string) => {
  const typeMap: Record<string, string> = {
    'SELECT': 'bg-blue-100 text-blue-800 dark:bg-blue-900/20 dark:text-blue-300',
    'INSERT': 'bg-green-100 text-green-800 dark:bg-green-900/20 dark:text-green-300',
    'UPDATE': 'bg-yellow-100 text-yellow-800 dark:bg-yellow-900/20 dark:text-yellow-300',
    'DELETE': 'bg-red-100 text-red-800 dark:bg-red-900/20 dark:text-red-300',
    'CREATE': 'bg-purple-100 text-purple-800 dark:bg-purple-900/20 dark:text-purple-300',
    'ALTER': 'bg-indigo-100 text-indigo-800 dark:bg-indigo-900/20 dark:text-indigo-300',
    'DROP': 'bg-red-100 text-red-800 dark:bg-red-900/20 dark:text-red-300',
    'OTHER': 'bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-300'
  }
  return typeMap[type || 'OTHER'] || typeMap['OTHER']
}

const getStatusClass = (status: string) => {
  const statusMap: Record<string, string> = {
    'pending': 'bg-yellow-100 text-yellow-800 dark:bg-yellow-900/20 dark:text-yellow-300',
    'success': 'bg-green-100 text-green-800 dark:bg-green-900/20 dark:text-green-300',
    'failed': 'bg-red-100 text-red-800 dark:bg-red-900/20 dark:text-red-300',
    'cancelled': 'bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-300'
  }
  return statusMap[status] || statusMap['pending']
}

const getStatusText = (status: string) => {
  const statusMap: Record<string, string> = {
    'pending': '待执行',
    'success': '成功',
    'failed': '失败',
    'cancelled': '已取消'
  }
  return statusMap[status] || status
}

const getRiskClass = (risk: string) => {
  const riskMap: Record<string, string> = {
    'low': 'bg-green-100 text-green-800 dark:bg-green-900/20 dark:text-green-300',
    'medium': 'bg-yellow-100 text-yellow-800 dark:bg-yellow-900/20 dark:text-yellow-300',
    'high': 'bg-orange-100 text-orange-800 dark:bg-orange-900/20 dark:text-orange-300',
    'critical': 'bg-red-100 text-red-800 dark:bg-red-900/20 dark:text-red-300'
  }
  return riskMap[risk] || riskMap['low']
}

const getRiskText = (risk: string) => {
  const riskMap: Record<string, string> = {
    'low': '低风险',
    'medium': '中风险',
    'high': '高风险',
    'critical': '极高风险'
  }
  return riskMap[risk] || risk
}

// Initialize
onMounted(() => {
  loadData()
})
</script>

<style scoped>
.loading-spinner {
  animation: spin 1s linear infinite;
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.form-input, .form-select {
  @apply block w-full px-3 py-2 bg-white border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-primary-500 focus:border-primary-500 sm:text-sm;
}

.dark .form-input, .dark .form-select {
  @apply bg-dark-800 border-dark-600 text-gray-100;
}
</style>
